<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://code.jquery.com https://unpkg.com https://d3js.org https://threejs.org https://cdn.plot.ly https://stackpath.bootstrapcdn.com https://maps.googleapis.com https://cdn.tailwindcss.com https://ajax.googleapis.com https://kit.fontawesome.com https://cdn.datatables.net https://maxcdn.bootstrapcdn.com https://code.highcharts.com https://tako-static-assets-production.s3.amazonaws.com https://www.youtube.com https://fonts.googleapis.com https://fonts.gstatic.com https://pfst.cf2.poecdn.net https://puc.poecdn.net https://i.imgur.com https://wikimedia.org https://*.icons8.com https://*.giphy.com https://picsum.photos https://images.unsplash.com; frame-src 'self' https://www.youtube.com https://trytako.com; child-src 'self'; manifest-src 'self'; worker-src 'self'; upgrade-insecure-requests; block-all-mixed-content;">
  <script src="https://puc.poecdn.net/standard.c8d3df4d67dddca2ccac.js"></script>
  <meta charset="utf-8">
  <title>报价单</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="https://puc.poecdn.net/tw.b9024aecac666455e183.js"></script>
  <script src="https://puc.poecdn.net/deps.ac7e4de820f1e47e84a2.js"></script>
  <script src="https://puc.poecdn.net/exports.b0f0f482cdeb5302b0b9.js"></script>
  <script src="https://puc.poecdn.net/renderer.6065bf6c6271ccf44fe1.js"></script>
  <script>
    Object.defineProperty(exports, "__esModule", { value: true });
    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
    var _react = require('react');
    var _react2 = _interopRequireDefault(_react);

    const PricingTable = () => {
      const [activeSection, setActiveSection] = _react.useState.call(void 0, 'client');

      const clientModules = [
        {
          name: '首页',
          features: ['轮播广告', '分类导航', '热门推荐', '活动通知'],
          complexity: '中',
          workDays: 5,
          priority: '高'
        },
        {
          name: '检测项目列表',
          features: ['分类标签导航', '项目卡片展示', '搜索筛选'],
          complexity: '中',
          workDays: 4,
          priority: '高'
        },
        {
          name: '项目详情',
          features: ['项目介绍', '价格信息', '检测流程', '预约入口'],
          complexity: '低',
          workDays: 3,
          priority: '高'
        },
        {
          name: '检测预约',
          features: ['样品信息表单', '取样方式选择', '时间选择', '订单提交'],
          complexity: '高',
          workDays: 6,
          priority: '高'
        },
        {
          name: '订单管理',
          features: ['订单状态分类', '订单详情', '进度查看'],
          complexity: '高',
          workDays: 7,
          priority: '高'
        },
        {
          name: '结果管理',
          features: ['报告预览', '报告下载', '历史记录'],
          complexity: '中',
          workDays: 4,
          priority: '中'
        },
        {
          name: '财务中心',
          features: ['余额管理', '充值功能', '开票管理', '优惠券'],
          complexity: '高',
          workDays: 8,
          priority: '中'
        },
        {
          name: '系统中心',
          features: ['个人资料', '安全设置', '系统设置'],
          complexity: '低',
          workDays: 3,
          priority: '低'
        }
      ];

      const adminModules = [
        {
          name: '客户管理',
          features: ['客户列表', '详情查看', '数据统计'],
          complexity: '中',
          workDays: 5,
          priority: '高'
        },
        {
          name: '订单管理',
          features: ['订单处理', '状态更新', '结果录入'],
          complexity: '高',
          workDays: 7,
          priority: '高'
        },
        {
          name: '卡券管理',
          features: ['优惠券管理', '发放统计', '批量操作'],
          complexity: '中',
          workDays: 4,
          priority: '中'
        },
        {
          name: '发票管理',
          features: ['发票申请处理', '开具管理', '下载发送'],
          complexity: '中',
          workDays: 5,
          priority: '中'
        }
      ];

      const apiAndBackendModules = [
        {
          name: '需求分析阶段',
          features: [
            '业务需求调研与分析',
            '用户角色与权限分析',
            '功能需求说明书编写',
            '原型设计与确认',
            '技术方案评审'
          ],
          complexity: '高',
          workDays: 0,
          priority: '高'
        },
        {
          name: '数据库设计',
          features: [
            '数据库概要设计',
            '表结构设计',
            '索引设计',
            '数据字典编写',
            '存储过程设计'
          ],
          complexity: '高',
          workDays: 3,
          priority: '高'
        },
        {
          name: '接口开发',
          features: [
            '用户认证接口',
            '检测项目管理接口',
            '订单管理接口',
            '支付相关接口',
            '报告管理接口',
            '数据统计接口',
            '系统配置接口'
          ],
          complexity: '高',
          workDays: 10,
          priority: '高'
        },
        {
          name: '后台管理',
          features: [
            '登录用户身份认证、权限确认、功能权限分配以及关联数据操作',
            '实时展示客户、订单、消费等与经营管理相关的统计类数据展示，可分时间维度进行分析展示（年月日）',
            '客户信息管理、客户团队信息管理、客户充值信息查看',
            '小程序广告栏设置、卡卷管理',
            '对小程序展示的检测服务项目信息提供编辑修改等相关管理功能',
            '客户充值、发票上传、财务报表统计',
            '提供定制化报表功能模块，根据实际业务需求定制所需业务统计报表',
            '根据整体系统要求，制定和建设数据表库结构及相关数据字段',
            '系统操作的日志记录，包含操作用户、操作内容及时间'
          ],
          complexity: '高',
          workDays: 7,
          priority: '高'
        }
      ];

      const complexityColor = {
        '低': 'bg-green-100 text-green-800',
        '中': 'bg-yellow-100 text-yellow-800',
        '高': 'bg-red-100 text-red-800'
      };

      const priorityColor = {
        '低': 'bg-gray-100 text-gray-800',
        '中': 'bg-blue-100 text-blue-800',
        '高': 'bg-purple-100 text-purple-800'
      };

      const DAILY_RATE = 600;

      // Function to calculate adjusted work days for a module
      const getAdjustedWorkDaysForModule = (module, section) => {
        let adjustedWorkDays = module.workDays;
        if (section === 'client' || section === 'admin') {
          adjustedWorkDays = module.workDays * 0.6;
        } else if (section === 'apiAndBackend') {
          adjustedWorkDays = module.workDays * 1.7;
        }
        return Math.round(adjustedWorkDays);
      };

      // Function to calculate total adjusted work days for a section
      const getTotalAdjustedWorkDays = (section) => {
        let totalAdjustedWorkDays = 0;
        let modules = [];

        if (section === 'client') {
          modules = clientModules;
        } else if (section === 'admin') {
          modules = adminModules;
        } else if (section === 'apiAndBackend') {
          modules = apiAndBackendModules;
        }

        for (const module of modules) {
          totalAdjustedWorkDays += getAdjustedWorkDaysForModule(module, section);
        }

        return totalAdjustedWorkDays;
      };


      return (
        _react2.default.createElement('div', { className: "p-6 max-w-6xl mx-auto" },
          _react2.default.createElement('div', { className: "flex gap-4 mb-6" },
            _react2.default.createElement('button', {
              className: `px-4 py-2 rounded-lg ${
                activeSection === 'client'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-100 text-gray-600'
              }`,
              onClick: () => setActiveSection('client'),
            }, "客户端模块"),
            _react2.default.createElement('button', {
              className: `px-4 py-2 rounded-lg ${
                activeSection === 'admin'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-100 text-gray-600'
              }`,
              onClick: () => setActiveSection('admin'),
            }, "管理端模块"),
            _react2.default.createElement('button', {
              className: `px-4 py-2 rounded-lg ${
                activeSection === 'apiAndBackend'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-100 text-gray-600'
              }`,
              onClick: () => setActiveSection('apiAndBackend'),
            }, "API和后台管理模块")
          ),
          _react2.default.createElement('div', { className: "overflow-x-auto" },
            _react2.default.createElement('table', { className: "w-full border-collapse" },
              _react2.default.createElement('thead', null,
                _react2.default.createElement('tr', { className: "bg-gray-50" },
                  _react2.default.createElement('th', { className: "p-4 text-left border" }, "模块名称"),
                  _react2.default.createElement('th', { className: "p-4 text-left border" }, "主要功能"),
                  _react2.default.createElement('th', { className: "p-4 text-left border" }, "复杂度"),
                  _react2.default.createElement('th', { className: "p-4 text-left border" }, "工作天数"),
                  _react2.default.createElement('th', { className: "p-4 text-left border" }, "优先级")
                )
              ),
              _react2.default.createElement('tbody', null,
                (() => {
                  if (activeSection === 'client') return clientModules;
                  if (activeSection === 'admin') return adminModules;
                  if (activeSection === 'apiAndBackend') return apiAndBackendModules;
                  return [];
                })().map(
                  (module, index) => (
                    _react2.default.createElement('tr', { key: index, className: "hover:bg-gray-50" },
                      _react2.default.createElement('td', { className: "p-4 border font-medium" }, module.name),
                      _react2.default.createElement('td', { className: "p-4 border" },
                        _react2.default.createElement('ul', { className: "list-disc list-inside" },
                          module.features.map((feature, i) => (
                            _react2.default.createElement('li', { key: i, className: "text-sm" }, feature)
                          ))
                        )
                      ),
                      _react2.default.createElement('td', { className: "p-4 border" },
                        _react2.default.createElement('span', {
                          className: `px-2 py-1 rounded-full text-sm ${
                            complexityColor[module.complexity]
                          }`,
                        }, module.complexity)
                      ),
                      // _react2.default.createElement('td', { className: "p-4 border" }, module.workDays, "天"),
                      _react2.default.createElement('td', { className: "p-4 border" }, getAdjustedWorkDaysForModule(module, activeSection), "天"),
                      _react2.default.createElement('td', { className: "p-4 border" },
                        _react2.default.createElement('span', {
                          className: `px-2 py-1 rounded-full text-sm ${
                            priorityColor[module.priority]
                          }`,
                        }, module.priority)
                      )
                    )
                  )
                )
              ),
              _react2.default.createElement('tfoot', null,
                _react2.default.createElement('tr', { className: "bg-gray-50 font-medium" },
                  _react2.default.createElement('td', { className: "p-4 border" }, "总计"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "-"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "-"),
                  _react2.default.createElement('td', { className: "p-4 border" },
                    (() => {
                      let section = activeSection;
                      let total = 0;

                      if (section === 'client') {
                          total = getTotalAdjustedWorkDays('client');
                      } else if (section === 'admin') {
                          total = getTotalAdjustedWorkDays('admin');
                      } else if (section === 'apiAndBackend') {
                          total = getTotalAdjustedWorkDays('apiAndBackend');
                      }
                      return total;
                    })(), "天"
                  ),
                  _react2.default.createElement('td', { className: "p-4 border" }, "-")
                )
              )
            )
          ),
          // 添加报价预估表格
          _react2.default.createElement('div', { className: "overflow-x-auto mt-8" },
            _react2.default.createElement('table', { className: "w-full border-collapse" },
              _react2.default.createElement('thead', null,
                _react2.default.createElement('tr', { className: "bg-gray-50" },
                  _react2.default.createElement('th', { className: "p-4 text-left border" }, "项目"),
                  _react2.default.createElement('th', { className: "p-4 text-left border" }, "预估工期（人天）"),
                  _react2.default.createElement('th', { className: "p-4 text-left border" }, "费用（元）")
                )
              ),
              _react2.default.createElement('tbody', null,
                _react2.default.createElement('tr', { className: "hover:bg-gray-50" },
                  _react2.default.createElement('td', { className: "p-4 border" }, "客户端小程序"),
                  _react2.default.createElement('td', { className: "p-4 border" }, getTotalAdjustedWorkDays('client')),
                  _react2.default.createElement('td', { className: "p-4 border" }, (getTotalAdjustedWorkDays('client') * DAILY_RATE).toFixed(0))
                ),
                _react2.default.createElement('tr', { className: "hover:bg-gray-50" },
                  _react2.default.createElement('td', { className: "p-4 border" }, "管理端公众号（web）"),
                  _react2.default.createElement('td', { className: "p-4 border" }, getTotalAdjustedWorkDays('admin')),
                  _react2.default.createElement('td', { className: "p-4 border" }, (getTotalAdjustedWorkDays('admin') * DAILY_RATE).toFixed(0))
                ),
                _react2.default.createElement('tr', { className: "hover:bg-gray-50" },
                  _react2.default.createElement('td', { className: "p-4 border" }, "后端开发"),
                  _react2.default.createElement('td', { className: "p-4 border" }, getTotalAdjustedWorkDays('apiAndBackend')),
                  _react2.default.createElement('td', { className: "p-4 border" }, (getTotalAdjustedWorkDays('apiAndBackend') * DAILY_RATE).toFixed(0))
                ),
                _react2.default.createElement('tr', { className: "hover:bg-gray-50" },
                  _react2.default.createElement('td', { className: "p-4 border" }, "软件开发缓冲期"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "7"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "4200")
                ),
                _react2.default.createElement('tr', { className: "hover:bg-gray-50" },
                  _react2.default.createElement('td', { className: "p-4 border" }, "UI 设计"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "0"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "0")
                ),
                _react2.default.createElement('tr', { className: "hover:bg-gray-50" },
                  _react2.default.createElement('td', { className: "p-4 border" }, "测试"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "0"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "0")
                ),
                _react2.default.createElement('tr', { className: "hover:bg-gray-50" },
                  _react2.default.createElement('td', { className: "p-4 border" }, "部署与优化"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "0"),
                  _react2.default.createElement('td', { className: "p-4 border" }, "0")
                )
              ),
              _react2.default.createElement('tfoot', null,
                _react2.default.createElement('tr', { className: "bg-gray-50 font-medium" },
                  _react2.default.createElement('td', { className: "p-4 border" }, "总计"),
                  _react2.default.createElement('td', { className: "p-4 border" }, (() => {
                    const adjustedClientWorkDays = getTotalAdjustedWorkDays('client');
                    const adjustedAdminWorkDays = getTotalAdjustedWorkDays('admin');
                    const adjustedApiWorkDays = getTotalAdjustedWorkDays('apiAndBackend');
                    return adjustedClientWorkDays + adjustedAdminWorkDays + adjustedApiWorkDays+7;
                  })() + " 人天"),
                  _react2.default.createElement('td', { className: "p-4 border" }, (() => {
                    const adjustedClientWorkDays = getTotalAdjustedWorkDays('client');
                    const adjustedAdminWorkDays = getTotalAdjustedWorkDays('admin');
                    const adjustedApiWorkDays = getTotalAdjustedWorkDays('apiAndBackend');
                    return (adjustedClientWorkDays + adjustedAdminWorkDays + adjustedApiWorkDays+7) * DAILY_RATE;
                  })().toFixed(0) + " 元")
                )
              )
            )
          ),
          // 添加备注
          _react2.default.createElement('div', { className: "mt-3" },
          _react2.default.createElement('p', { className: "text-sm" }, "以上报价所提及的工期仅为基于当前项目信息和常规开发流程所做的预估。在项目推进过程中，可能会因需求变更、技术难题、第三方依赖问题、不可抗力因素（如自然灾害、政策法规调整等）导致工期产生不确定性。我们会尽最大努力确保项目按时完成，但无法对因上述不可控因素导致的工期延误承担完全责任。若出现工期调整情况，我们将及时与贵方沟通并提供相应解决方案。"),
            _react2.default.createElement('p', { className: "text-sm" }, "服务器、短信验证码等第三方费用未包含在内。"),
            _react2.default.createElement('p', { className: "text-sm" }, "如果需要加急开发，可以考虑增加人手，但会有额外成本。"),
          )
        )
      );
    };

    exports.default = PricingTable;
  </script>
</head>

<body>
  <div id="preview-app"></div>
</body>

</html>